<template>
	<div class="SingleChoiceList-components">
		<div v-if="data.questionAnswerContent && explain">
			<div
				class="mt10"
				v-for="(questionList, index) in data.questionAnswerContent.questionList"
				:key="index"
			>
				<p class="ques-title">{{ questionList.questionStem }}</p>
				<div class="mt10" v-for="(question, idx) in questionList.questionList" :key="idx">
					<p class="ques-title">{{ question.question }}</p>
					<van-radio-group v-model="answer[index][idx]">
						<van-radio
							disabled
							:class="[question.score ? 'right-one' : 'error-one']"
							:name="i"
							v-for="(item, i) in question.choiceAndAnswerList"
							:key="i"
							>{{ item.choice }}</van-radio
						>
					</van-radio-group>
					<p class="ques-title" style="font-weight: bold" v-show="!question.score">
						正确答案：
						<span style="color: #56baca">{{ question.answer | numFilter }}</span>
					</p>
				</div>
			</div>
		</div>
		<div v-if="data.content && !explain">
			<div
				class="mt10"
				v-for="(questionList, index) in data.content.questionList"
				:key="index"
			>
				<p class="ques-title">{{ questionList.questionStem }}</p>
				<div class="mt10" v-for="(question, idx) in questionList.questionList" :key="idx">
					<p class="ques-title">{{ question.question }}</p>
					<van-radio-group v-model="answer[index][idx]">
						<van-radio
							:name="i"
							v-for="(item, i) in question.choiceAndAnswerList"
							:key="i"
							>{{ item.choice }}</van-radio
						>
					</van-radio-group>
				</div>
			</div>
			<slot></slot>
		</div>
	</div>
</template>
<script>
export default {
	name: "SingleChoiceList",
	props: {
		data: {
			type: Object,
			default: {},
		},
		explain: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			answer: [[""]],
		};
	},
	watch: {
		data: {
			handler(newV, oldV) {
				this.initState();
			},
			deep: true,
		},
	},
	mounted() {
		this.initState();
	},
	methods: {
		initState() {
			if (this.explain) {
				console.log(this.data.questionAnswerContent);
				if (this.data.questionAnswerContent) {
					this.answer = this.data.questionAnswerContent.studentAnswer;
				} else {
					this.filterRight();
					this.answer = [[""]];
				}
			} else {
				this.answer = this.data.answer || [[""]];
			}
		},
		filterRight() {
			this.data.questionAnswerContent = JSON.parse(JSON.stringify(this.data.questionContent));
			this.data.questionAnswerContent.questionList.forEach((questionList, index) => {
				questionList.questionList.forEach((question, idx) => {
					question.choiceAndAnswerList.forEach((element, i) => {
						if (element.answer) {
							question.answer = i;
						}
					});
				});
			});
			this.data.questionAnswerContent.studentAnswer = [[""]];
		},
		computeScore() {
			var score = 0;
			var content = JSON.parse(JSON.stringify(this.data.content));
			content.finish = true;
			content.questionList.forEach((questionList, i) => {
				questionList.questionList.forEach((arr, idx) => {
					var mark = false;
					arr.choiceAndAnswerList.forEach((element, index) => {
						if (element.answer) {
							arr.answer = index;
						}
						if (index == this.answer[i][idx]) {
							score = element.answer ? score + this.data.questionScore : score;
							mark = element.answer;
							element.answer = true;
						} else {
							element.answer = null;
						}
					});
					if (mark) {
						arr.score = this.data.questionScore;
					} else {
						arr.score = 0;
					}
					if (!this.$isFull(this.answer[i][idx])) {
						content.finish = false;
					}
				});
			});
			content.studentAnswer = this.answer;
			return { content, score };
		},
		changeValue(key) {
			var { content, score } = this.computeScore();
			this.$emit("changeValue", this.answer, content, score);
		},
	},
};
</script>

<style lang="scss">
.SingleChoiceList-components {
}
</style>
